<template>
  <div class="content flex-column">
    <div class="order-tit">
      <span>订单展示</span>
    </div>
    <div class="allview flex-space">
      <div class="allview-item flex-column" style="background-color:#65C6F3;">
        <!-- <img src="http://images.51xeld.com/2020/08/090259740de54201be8ca392a01492de.png" alt=""> -->
        <div class="allview-item-title">今日订单总数</div>
        <div class="allview-item-number">{{dataForm.tdOrders}}</div>
      </div>
      <div class="allview-item flex-column" style="background-color:#85A5ED;">
        <div class="allview-item-title">昨日订单总数</div>
        <div class="allview-item-number">{{dataForm.ydOrders}}</div>
      </div>
      <div class="allview-item flex-column" style="background-color:#F58261;">
        <div class="allview-item-title">今日销售总额</div>
        <div class="allview-item-number">{{dataForm.tdTotalSales}}</div>
      </div>
      <div class="allview-item flex-column" style="background-color:#A69BFD;">
        <div class="allview-item-title">昨日销售总额</div>
        <div class="allview-item-number">{{dataForm.ydTotalsales}}</div>
      </div>
    </div>

    <div class="orders-users"> 
      <div class="orders">
        <div class="orders-title">
          事务总览
        </div>
        <div class="orders-content flex-space">
          <div class="orders-item flex-column">
            <div class="orders-item-number">{{dataForm.pendingPays}}</div>
            <div class="orders-item-title">待付款订单</div>
          </div>
          <div class="orders-item flex-column">
            <div class="orders-item-number">{{dataForm.pendingTransfer}}</div>
            <div class="orders-item-title">待发货订单</div>
          </div>
          <div class="orders-item flex-column">
            <div class="orders-item-number">{{dataForm.pendingRefund}}</div>
            <div class="orders-item-title">待处理退款</div>
          </div>
          <div class="orders-item flex-column">
            <div class="orders-item-number">{{dataForm.completedOrders}}</div>
            <div class="orders-item-title">已完成订单</div>
          </div>          
        </div>
      </div>
      <div class="users">
        <div class="users-title">
          用户总览
        </div>
        <div class="users-content flex-space">
          <div class="users-item flex-column">
            <div class="users-item-number">{{dataForm.dayMemberList}}</div>
            <div class="users-item-title">今日新增</div>
          </div>
          <div class="users-item flex-column">
            <div class="users-item-number">{{dataForm.monthMemberList}}</div>
            <div class="users-item-title">本月新增</div>
          </div>
          <div class="users-item flex-column">
            <div class="users-item-number">{{dataForm.allMemberList}}</div>
            <div class="users-item-title">会员总数</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="order-counter">
      <div class="counter-tit">订单统计</div>
      <div class="counter-body">
        <div class="proportion">
          <div class="proportion-item">
            <div class="proportion-item-tit">本月订单总数</div>
            <div class="count-num">{{dataForm.tmTotalOrders}}</div>
            <div class="proportion-num"><span :class="dataForm.monthNumberPercentage>=0?'green':'red'">{{dataForm.monthNumberPercentage>=0?'+':''}}{{dataForm.monthNumberPercentage}}%</span> 同比上月</div>
          </div>
          <div class="proportion-item">
            <div class="proportion-item-tit">本周订单总数</div>
            <div class="count-num">{{dataForm.twTotalOrders}}</div>
            <div class="proportion-num"><span :class="dataForm.weekNumberPercentage>=0?'green':'red'">{{dataForm.weekNumberPercentage>=0?'+':''}}{{dataForm.weekNumberPercentage}}%</span> 同比上周</div>
          </div>
          <div class="proportion-item">
            <div class="proportion-item-tit">本月销售总额</div>
            <div class="count-num">{{dataForm.tmTotalSales}}</div>
            <div class="proportion-num"><span :class="dataForm.monthMoneyPercentage>=0?'green':'red'">{{dataForm.monthMoneyPercentage>=0?'+':''}}{{dataForm.monthMoneyPercentage}}%</span> 同比上月</div>
          </div>
          <div class="proportion-item">
            <div class="proportion-item-tit">本周销售总额</div>
            <div class="count-num">{{dataForm.twTotalSales}}</div>
            <div class="proportion-num"><span :class="dataForm.weekMoneyPercentage>=0?'green':'red'">{{dataForm.weekMoneyPercentage>=0?'+':''}}{{dataForm.weekMoneyPercentage}}%</span> 同比上周</div>
          </div>
        </div>
        <div class="switch-btn">
          <div :class="formIndex==1?'active':''" @click="handleSwitch(1)">周销售</div>
          <div :class="formIndex==2?'active':''" @click="handleSwitch(2)">月销售</div>
        </div>
        <div id="weekList" class="echartBox" v-if="formIndex==1"></div>
        <div id="monthList" class="echartBox" v-if="formIndex==2"></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      formIndex:1,
      dataForm: {
        tdOrders: 0,
        tdOrders: 0,
        tdTotalSales: 0,
        ydTotalsales: 0,
        pendingPays: 0,
        pendingTransfer: 0,
        pendingRefund: 0,
        completedOrders: 0,
        dayMemberList: 0,
        monthMemberList: 0,
        allMemberList: 0,
        tmTotalOrders:0,
        tmTotalSales:0,
        twTotalOrders: 0,
        twTotalSales: 0,
        monthNumberPercentage: 0,
        weekNumberPercentage: 0,
        monthMoneyPercentage: 0,
        weekMoneyPercentage: 0,
      }
    }
  },

  components:{
  },
  methods:{
    bulidWeekList(){

      var weekXName = this.weekBuildArgs[0]
      var xAxisDate = this.weekBuildArgs[1]
      var weekList = this.weekBuildArgs[2]
      
      var myChart = echarts.init(document.getElementById('weekList'));
      window.onresize = function () {
        myChart.resize()
      }
      myChart.setOption({
        title:{
          text:'周销售统计表',
          left: "center",
        },
        grid: {
          // left:100,
          // right: 50,
          top: 100,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            animation: false,
          },
          formatter: function (params) {
            return params[0].axisValue+'<br />销售额：'+params[0].data;
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisDate
        },
        yAxis: {
          type: 'value',
          name: "销售额",
          // min: 'dataMin',
          max: 'dataMax',          
        },
        series: [{
          // data: [2500,3700,2900,3100,3200,4500,2500,2400],
          data: this.weekList,
          type: 'line',
          lineStyle: {
            color: "#19A8FE"
          },
          areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0.1,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#C0E7FF' // 0% 处的颜色
                }, {
                    offset: 1, color: 'white' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
          },
        }]
      });
    },
    
    buildMonthList(){
      var monthXName = this.monthBuildArgs[0]
      var xAxisDate = this.monthBuildArgs[1]
      var monthList = this.monthBuildArgs[2]
      var myChart = echarts.init(document.getElementById('monthList'));
      window.onresize = function () {
        myChart.resize()
      }     
      myChart.setOption({
        title:{
          text:'月销售统计表',
          left: "center",
        },
        grid: {
          // left:100,
          // right: 50,
          top: 100,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            animation: false,
          },
          formatter: function (params) {
            return monthXName+ String(params[0].axisValue)+'日<br />销售额：'+params[0].data+"元";
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisDate,
          nameLocation: 'end',
          name: monthXName,
        },
        yAxis: {
          type: 'value',
          name: "销售额",
          // min: 'dataMin',
          max: 'dataMax',
        },
        series: [{
          data: monthList,
          type: 'line',
          lineStyle: {
            color: "#19A8FE"
          },
          areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0.1,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#C0E7FF' // 0% 处的颜色
                }, {
                    offset: 1, color: 'white' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
          },
        }]
      });


    },

    handleSwitch(index){
      console.log(index);
      this.formIndex = index
      if (index==1) {
        this.$nextTick(() =>{
          this.bulidWeekList()
        })
      }else{
        this.$nextTick(() =>{
          this.buildMonthList()
        })
      }
    }
  },

  created() {
    console.log();
    this.$http({
      url: this.$http.adornUrl('/home/statitics/census')
    }).then(({data}) =>{
      this.dataForm.tdOrders = data.tdTotalSales[0].countNumber?data.tdTotalSales[0].countNumber: 0
      this.dataForm.ydOrders = data.ydTotalsales[0].countNumber?data.ydTotalsales[0].countNumber: 0
      this.dataForm.tdTotalSales = data.tdTotalSales[0].countMoney?data.tdTotalSales[0].countMoney: 0
      this.dataForm.ydTotalsales = data.ydTotalsales[0].countMoney?data.ydTotalsales[0].countMoney: 0
      this.dataForm.pendingPays = data.pendingPays[0].countNumber?data.pendingPays[0].countNumber: 0
      this.dataForm.pendingTransfer = data.pendingTransfer[0].countNumber?data.pendingTransfer[0].countNumber: 0
      this.dataForm.pendingRefund = data.pendingRefund[0].countNumber?data.pendingRefund[0].countNumber: 0
      this.dataForm.completedOrders = data.completedOrders[0].countNumber?data.completedOrders[0].countNumber: 0
      this.dataForm.dayMemberList = data.dayMemberList[0].countNumber?data.dayMemberList[0].countNumber: 0
      this.dataForm.monthMemberList = data.monthMemberList[0].countNumber?data.monthMemberList[0].countNumber: 0
      this.dataForm.allMemberList = data.allMemberList[0].countNumber?data.allMemberList[0].countNumber: 0
      this.dataForm.tmTotalOrders = data.tmTotalSales[0].countNumber?data.tmTotalSales[0].countNumber:0
      this.dataForm.tmTotalSales = data.tmTotalSales[0].countMoney?data.tmTotalSales[0].countMoney:0
      this.dataForm.twTotalOrders = data.twTotalSales[0].countNumber?data.twTotalSales[0].countNumber:0
      this.dataForm.twTotalSales = data.twTotalSales[0].countMoney?data.twTotalSales[0].countMoney:0
      this.dataForm.monthNumberPercentage = Math.floor(data.monthNumberPercentage * 10000) / 100 
      this.dataForm.weekNumberPercentage = Math.floor(data.weekNumberPercentage * 10000) / 100 
      this.dataForm.monthMoneyPercentage = Math.floor(data.monthMoneyPercentage * 10000) / 100 
      this.dataForm.weekMoneyPercentage = Math.floor(data.weekMoneyPercentage * 10000) / 100 
      var weekList = []
      var monthList = []
      var dateMsg = new Date()
      var monthxAxisDate = []
      var weekxAxisDate = []
      var monthXName = `${dateMsg.getFullYear()}年${dateMsg.getMonth()+1}月`
      data.weekList.forEach((item) =>{
        // if (item.time < dateMsg.getDay()) {
          weekList.push(item.countMoney)
          weekxAxisDate.push(item.time)
        // }
      })
      data.monthList.forEach((item) =>{
        if (item.time.split('-')[2] < dateMsg.getDate()) {
          monthList.push(item.countMoney)
          monthxAxisDate.push(item.time.split('-')[2])
        }
      })
      this.weekList = weekList
      this.monthList = monthList
      // var year = dateMsg.getFullYear();
      // var month = dateMsg.getMonth()+1;
      // var d = new Date(year, month, 0);

      // for (let i = 0; i < d; i++) {
      //   xAxisDate.push(i)        
      // }
      // // console.log(xAxisDate);
      this.weekList = weekList
      this.weekBuildArgs = ['',weekxAxisDate,weekList]
      this.monthBuildArgs = [monthXName,monthxAxisDate,monthList]
      this.bulidWeekList()
      // this.buildMonthList(monthXName,xAxisDate,monthList)
      // console.log(weekList);
    })
  },
}
</script>

<style scoped>
  div{
    padding: 0;
    margin: 0;
  }
  span{
    padding: 0;
    margin: 0;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .flex-space{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }


  .content{
    width: 100%;
    font-size: 20px;
  }
  .content .order-tit{
    width: 90%;
    font-weight: 550;
    color: #33363F;
    font-size: 18px;
  }
  .content .order-tit::before{
    content: '';
    border-right: 3px solid #018EED;
    margin-right: 4px;
  }

  .allview{
    justify-content: space-between;
    width: 90%;
    height: 90px;
    margin: 20px 0 0 0 ;
  }
  .allview-item{
    /* border: 1px solid #DCDFE6; */
    height: 110px;
    width: 220px;
    border-radius: 8px;
    justify-content: space-around;
    padding: 10px 0;
    position: relative;
    color: #fff;
    background: url(~@/assets/img/order-item-bg.png) no-repeat left bottom;
    background-size:100%;

  }

  /* .allview-item-title{
    color: #909399;
  }
  .allview-item-number{
    color: #606266;
  }  */
  .orders-users{
    display: flex;
    font-weight: bold;
    width: 90%;
    justify-content: space-between;
    margin: 20px 0 0 0 ;
    color: #606266; 
  }
  .orders{
    width: 50%;
    height: 190px;
    display: flex;
    flex-direction: column;
    /* border: 1px solid #DCDFE6; */
    border-right: 1px solid #DFDFDF;
  }
  .orders .orders-title{
    /* background-color: #F2F6FC; */
    height: 50px;
    line-height: 50px;
    color: #33363F;
    font-size: 18px;

    /* padding-left: 30px; */
  }
  .orders .orders-content{
    height: 140px;
    font-weight: lighter;
  }
  .orders-item{
    padding: 20px 0;
    height: 140px;
    width: 120px;
    justify-content: space-around;
  }
  .orders-item-tit{
    color: #3A3E46;
    font-size: 15px;
  }
  .orders-item-number{
    color: #D31414;
    font-size: 30px;
    font-size: 550;
  }
  .users{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* border: 1px solid #DCDFE6; */
  }
  .users .users-title{
    /* background-color: #F2F6FC; */
    color: #33363F;
    font-size: 18px; 
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
  }
.users .users-title::before,.orders .orders-title::before,.order-counter .counter-tit::before{
  content: "";
  border-right: 3px solid #018EED;
  margin-right: 4px;
}

  .users .users-content{
    height:140px;
    font-weight: lighter;
  }
  .users-item{
    width: 120px;
    height: 140px;
    padding: 20px 0;
    justify-content: space-around;
  }
  .users-item-number{
    color: #D31414;
    font-size: 30px;
    font-size: 550  ;
  }


  .order-counter{
    /* margin: 30px auto; */
    width: 90%;
    margin-top: 30px;
    /* border: 1px solid #DCDFE6; */
  }
  .order-counter .counter-tit{
    height: 50px;
    /* background-color: #F2F6FC; */
    width: 100%;
    line-height: 50px;
    font-weight: 550;
    color: #33363F;
    font-size: 18px;
  }
  .order-counter .counter-body{
    height: 420px;
    display: flex;
    position: relative;
  }
  .order-counter .counter-body .proportion{
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 20px;
    border-right: 1px solid #DCDFE6 ;
    padding-left: 40px;
  }
  .order-counter .counter-body .switch-btn{
    position: absolute;
    left: 25%;
    top: 20px;
    font-size: 15px;
    /* border: 1px solid #eee; */
    border-radius: 10px;
    display: flex;
    width: 120px;
    height: 45px;
    line-height: 45px;
    z-index: 999;
    cursor: pointer;
  }
  .order-counter .counter-body .switch-btn div{
    width: 50%;
    height: 100%;
    text-align: center;
    background-color: darkgray;
    color: white;
  }

  .order-counter .counter-body .switch-btn .active{
    color: green;
    background: #eee;
  }


  .order-counter .counter-body .proportion .proportion-item-tit{
    font-size: 15px;
    color: #909399;
    margin-bottom: 10px;
  }
  .order-counter .counter-body .proportion .count-num{
    color: #606266;
    margin-bottom: 10px;
  }
  .order-counter .counter-body .proportion .proportion-num{
    color: #C0C4CC;
    font-size: 15px;
  }
  .order-counter .counter-body .proportion .proportion-num .red{
    color: #F56C84;
  }
  .order-counter .counter-body .proportion .proportion-num .green{
    color: #67C7B3;
  }
    


  .echartBox{
    width: 80%;
    height: 96%;
    align-self: flex-end;
  }

</style>